/* 全局样式重置，使用通配符选择器对所有元素生效 */
* {
    /* 去除内外边距，使布局更易于控制 */
    margin: 0;
    padding: 0;
    /* 盒模型采用 border-box，元素宽度包含内容、内边距和边框 */
    box-sizing: border-box;
}

/* 为 HTML 和 body 元素设置样式 */
html,
body {
    /* 字体大小设置为 16px，作为后续 rem 单位的基准 */
    font-size: 16px;
    /* 设置默认字体族，先尝试使用 sans-serif 字体，如果没有则使用通用的无衬线字体 */
    font-family: sans-serif;
    /* 文本颜色为深灰色 */
    color: #333;
    /* 行高为 1.6，使文本阅读更舒适 */
    line-height: 1.6;
    /* 背景颜色为浅灰色 */
    background-color: #f4f4f4;
}

/* 链接样式 */
a {
    /* 去除链接下划线 */
    text-decoration: none;
    /* 链接颜色为蓝色 */
    color: #007bff;
}

/* 鼠标悬停在链接上的样式 */
a:hover {
    /* 添加下划线 */
    text-decoration: underline;
    /* 颜色变深，增强交互反馈 */
    color: #0056b3;
}

/* 列表样式 */
ul,
ol {
    /* 去除列表默认的项目符号和编号 */
    list-style: none;
}

/* 标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* 标题字体粗细为粗体 */
    font-weight: bold;
    /* 标题下方添加一定的外边距，分隔内容 */
    margin-bottom: 0.5em;
}

/* 段落样式 */
p {
    /* 段落下方添加一定的外边距，分隔内容 */
    margin-bottom: 1em;
}

/* 图片样式 */
img {
    /* 图片最大宽度为 100%，适应父容器大小 */
    max-width: 100%;
    /* 高度自适应，保持图片比例 */
    height: auto;
    /* 垂直对齐方式为居中 */
    vertical-align: middle;
}

/* 表格样式 */
table {
    /* 合并表格边框 */
    border-collapse: collapse;
    /* 表格宽度为 100% */
    width: 100%;
    /* 表格外边距底部为 1em，分隔其他内容 */
    margin-bottom: 1em;
}

/* 表格的表头单元格和普通单元格样式 */
th,
td {
    /* 单元格内边距为 0.75em，使内容有一定的间距 */
    padding: 0.75em;
    /* 单元格添加 1px 宽的浅灰色边框 */
    border: 1px solid #ddd;
    /* 文本水平对齐方式为左对齐 */
    text-align: left;
}

/* 表格表头样式 */
th {
    /* 表头背景颜色为浅灰色 */
    background-color: #f2f2f2;
    /* 表头字体粗细为粗体 */
    font-weight: bold;
}

/* 表单元素样式 */
input,
select,
textarea {
    /* 表单元素内边距为 0.5em，使输入内容有一定的间距 */
    padding: 0.5em;
    /* 表单元素边框为 1px 宽的浅灰色边框 */
    border: 1px solid #ccc;
    /* 表单元素边框圆角为 4px */
    border-radius: 4px;
    /* 字体大小为 1em，与页面整体字体大小一致 */
    font-size: 1em;
    /* 表单元素宽度为 100%，适应父容器大小 */
    width: 100%;
    /* 去除表单元素获得焦点时的默认轮廓线 */
    outline: none;
}

/* 表单元素获得焦点时的样式 */
input:focus,
select:focus,
textarea:focus {
    /* 边框颜色变为蓝色，增强交互反馈 */
    border-color: #007bff;
    /* 添加蓝色的盒子阴影，突出显示 */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 按钮样式 */
button {
    /* 按钮内边距为 0.5em 1em，使按钮有一定的大小 */
    padding: 0.5em 1em;
    /* 按钮背景颜色为蓝色 */
    background-color: #007bff;
    /* 按钮文本颜色为白色 */
    color: #fff;
    /* 按钮边框为无 */
    border: none;
    /* 按钮边框圆角为 4px */
    border-radius: 4px;
    /* 鼠标指针悬停在按钮上时变为手型 */
    cursor: pointer;
    /* 字体大小为 1em，与页面整体字体大小一致 */
    font-size: 1em;
}

/* 鼠标悬停在按钮上的样式 */
button:hover {
    /* 按钮背景颜色变深，增强交互反馈 */
    background-color: #0056b3;
}